<!--
    This page contains the form "Generalities Heating"
    with generale heating informations about the building
-->

<link rel="stylesheet" href="../library/slider/jslider.css" type="text/css">
<link rel="stylesheet" href="../library/slider/jslider.blue.css" type="text/css">
<link rel="stylesheet" href="../library/slider/jslider.plastic.css" type="text/css">
<link rel="stylesheet" href="../library/slider/jslider.round.css" type="text/css">
<link rel="stylesheet" href="../library/slider/jslider.round.plastic.css" type="text/css">

<script type="text/javascript" src="../library/slider/jshashtable-2.1_src.js"></script>
<script type="text/javascript" src="../library/slider/jquery.numberformatter-1.2.3.js"></script>
<script type="text/javascript" src="../library/slider/tmpl.js"></script>
<script type="text/javascript" src="../library/slider/jquery.dependClass-0.1.js"></script>
<script type="text/javascript" src="../library/slider/draggable-0.1.js"></script>
<script type="text/javascript" src="../library/slider/jquery.slider.js"></script>
<script>
    function eventHeating(){
        generalities[13].processValidation();
        displayAdjoiningOrientation();
       
        var buildingSituation = document.getElementById("selectHeating").value;
       
        $("#ccc").attr('checked', true);
        displayCeilingFloor();
       
        if(buildingSituation=='Individuel'){
            ShowCCC();
            ShowCCN();
            ShowNCC();
            ShowNCN();
            ShowCC();
            ShowNC();            
        }
       
        if(buildingSituation=='Mitoyen'){
            ShowCCC();
            ShowCCN();
            ShowNCC();
            ShowNCN();
            ShowCC();
            ShowNC();            
        }
       
        if(buildingSituation=='AuDessus'){
            ShowCCC();
            HideCCN();
            ShowNCC();
            HideNCN();
            HideCC();
            HideNC();          
        }
       
        if(buildingSituation=='AuDessous'){
            ShowCCC();
            ShowCCN();
            HideNCC();
            HideNCN();
            ShowCC();
            HideNC();            
        }
    }
    function HideCCC(){
        $("#HeatCCC").addClass("cacher");
        $("#HeatCCCInput").addClass("cacher");
    }
    function ShowCCC(){
        $("#HeatCCC").removeClass("cacher");
        $("#HeatCCCInput").removeClass("cacher");
    }
   
    function HideCCN(){
        $("#HeatCCN").addClass("cacher");
        $("#HeatCCNInput").addClass("cacher");
    }
    function ShowCCN(){
        $("#HeatCCN").removeClass("cacher");
        $("#HeatCCNInput").removeClass("cacher");
    }
   
    function HideNCC(){
        $("#HeatNCC").addClass("cacher");
        $("#HeatNCCInput").addClass("cacher");
    }
    function ShowNCC(){
        $("#HeatNCC").removeClass("cacher");
        $("#HeatNCCInput").removeClass("cacher");
    }
   
    function HideNCN(){
        $("#HeatNCN").addClass("cacher");
        $("#HeatNCNInput").addClass("cacher");
    }
    function ShowNCN(){
        $("#HeatNCN").removeClass("cacher");
        $("#HeatNCNInput").removeClass("cacher");
    }
   
    function HideCC(){
        $("#HeatCC").addClass("cacher");
        $("#HeatCCInput").addClass("cacher");
    }
    function ShowCC(){
        $("#HeatCC").removeClass("cacher");
        $("#HeatCCInput").removeClass("cacher");
    }
   
    function HideNC(){
        $("#HeatNC").addClass("cacher");
        $("#HeatNCInput").addClass("cacher");
    }
    function ShowNC(){
        $("#HeatNC").removeClass("cacher");
        $("#HeatNCInput").removeClass("cacher");
    }
   
    function displayAdjoiningOrientation(){
        if(document.getElementById('selectHeating').value == 'Mitoyen'){
            $("#orientationWallHeating").removeClass("cacher");
            generalities[14].setIsDisabled(false);
        }
        else {
            $("#orientationWallHeating").addClass("cacher");
            generalities[14].setIsDisabled(true);
        }
    }
   
    function displayCeilingFloor() {
       
        if(document.getElementById('ccc').checked){
            //affichage des images toit et sols en lien avec le choix du type de chauffage
            $('#ceilingPicture').attr('src', '../images/forms/ceiling/ceilingRoof.png');
            $('#floorPicture').attr('src', '../images/forms/floor/floorBasement2.png');
           
            //activation des champs du toit selon si le toit et le plafond sont pareils ou différents
            document.getElementById('ceilingAreaId').setAttribute('readonly', 'readonly');
            document.getElementById('modifAreaCeiling').disabled = true;
            document.getElementById('changedCeiling').disabled = true;
            document.getElementById('ceilingEqualsRoofDesc').hidden = false;
           
            //en cas de similaritude entre le toit et le plafond, report des valeurs
            document.getElementById('ceilingAreaId').value = document.getElementById('roofAreaId').value;
            document.getElementById('modifAreaCeiling').checked = false;
            document.getElementById('modifAreaCeiling').disabled = true;
            document.getElementById('changedCeilingDesc').style.color="grey";
            if(document.getElementById('changedRoof').checked) {
                document.getElementById('changedCeiling').checked = true;
            }
            document.getElementById('yearChangedCeiling').value = document.getElementById('yearChangedRoof').value;
           
            //si on décoche rénovation du toit, ca vide aussi rénovation du plafond
            if(document.getElementById('changedRoof').checked == false) {
                if(document.getElementById('changedCeiling').disabled == true) {
                    document.getElementById('yearChangedCeiling').value = "";
                    document.getElementById('changedCeiling').checked = false;
                }
            }
           
            //récupération de la superficie pour le sol
            if(document.getElementById('modifAreaFloor').checked == false)
                document.getElementById("floorAreaId").value = document.getElementById("area").value / document.getElementById("floorsOccupied").value;
        }
       
        if(document.getElementById('ccn').checked){
            //affichage des images toit et sols en lien avec le choix du type de chauffage
            $('#ceilingPicture').attr('src', '../images/forms/ceiling/ceilingRoof.png');
            $('#floorPicture').attr('src', '../images/forms/floor/floorBasement1.png');
           
            //activation des champs du toit selon si le toit et le plafond sont pareils ou différents
            document.getElementById('ceilingAreaId').setAttribute('readonly', 'readonly');
            document.getElementById('modifAreaCeiling').disabled = true;
            document.getElementById('changedCeiling').disabled = true;  
            document.getElementById('ceilingEqualsRoofDesc').hidden = false;
           
            //en cas de similaritude entre le toit et le plafond, report des valeurs
            document.getElementById('ceilingAreaId').value = document.getElementById('roofAreaId').value;
            document.getElementById('modifAreaCeiling').checked = false;
            document.getElementById('modifAreaCeiling').disabled = true;
            document.getElementById('changedCeilingDesc').style.color="grey";
            if(document.getElementById('changedRoof').checked) {
                document.getElementById('changedCeiling').checked = true;
            }
            document.getElementById('yearChangedCeiling').value = document.getElementById('yearChangedRoof').value;
           
            //si on décoche rénovation du toit, ca vide aussi rénovation du plafond
            if(document.getElementById('changedRoof').checked == false) {
                if(document.getElementById('changedCeiling').disabled == true) {
                    document.getElementById('yearChangedCeiling').value = "";
                    document.getElementById('changedCeiling').checked = false;
                }
            }
           
            //récupération de la superficie pour le sol
            if(document.getElementById('modifAreaFloor').checked == false)
                document.getElementById("floorAreaId").value = document.getElementById("area").value / document.getElementById("floorsOccupied").value;
        }
       
        if(document.getElementById('cc').checked){
            //affichage des images toit et sols en lien avec le choix du type de chauffage
            $('#ceilingPicture').attr('src', '../images/forms/ceiling/CeilingRoof.png');
            $('#floorPicture').attr('src', '../images/forms/floor/floorNoBasement.png');
           
            //activation des champs du toit selon si le toit et le plafond sont pareils ou différents
            document.getElementById('ceilingAreaId').disabled = true;
            document.getElementById('modifAreaCeiling').disabled = true;
            document.getElementById('changedCeiling').disabled = true;  
            document.getElementById('ceilingEqualsRoofDesc').hidden = false;
           
            //en cas de similaritude entre le toit et le plafond, report des valeurs
            document.getElementById('ceilingAreaId').value = document.getElementById('roofAreaId').value;
            document.getElementById('modifAreaCeiling').checked = false;
            document.getElementById('modifAreaCeiling').disabled = true;
            document.getElementById('changedCeilingDesc').style.color="grey";
            if(document.getElementById('changedRoof').checked) {
                document.getElementById('changedCeiling').checked = true;
            }
            document.getElementById('yearChangedCeiling').value = document.getElementById('yearChangedRoof').value;
           
            //si on décoche rénovation du toit, ca vide aussi rénovation du plafond
            if(document.getElementById('changedRoof').checked == false) {
                if(document.getElementById('changedCeiling').disabled == true) {
                    document.getElementById('yearChangedCeiling').value = "";
                    document.getElementById('changedCeiling').checked = false;
                }
            }
           
            //récupération de la superficie pour le sol
            if(document.getElementById('modifAreaFloor').checked == false)
                document.getElementById("floorAreaId").value = document.getElementById("area").value / document.getElementById("floorsOccupied").value;
        }
       
        if(document.getElementById('ncc').checked){
            //affichage des images toit et sols en lien avec le choix du type de chauffage
            $('#ceilingPicture').attr('src', '../images/forms/ceiling/ceilingCeiling.png');
            $('#floorPicture').attr('src', '../images/forms/floor/floorBasement2.png');
           
            //activation des champs du toit selon si le toit et le plafond sont pareils ou différents
            document.getElementById("ceilingAreaId").value = document.getElementById("area").value / document.getElementById("floorsOccupied").value;
            document.getElementById('modifAreaCeiling').disabled = false;
            document.getElementById('changedCeilingDesc').style.color="black";
            document.getElementById('ceilingEqualsRoofDesc').hidden = true;
           
            document.getElementById('changedCeiling').disabled = false;
            if(document.getElementById('changedCeiling').checked == true) {
                document.getElementById('changedCeiling').checked = true;
                document.getElementById('yearChangedCeiling').value = "";
            }
            else {
                document.getElementById('changedCeiling').checked = false;
                document.getElementById('yearChangedCeiling').value = "";
            }
           
            //récupération de la superficie pour le sol
            if(document.getElementById('modifAreaFloor').checked == false) {
                document.getElementById("floorAreaId").value = document.getElementById("area").value / document.getElementById("floorsOccupied").value;
            }
        }
       
        if(document.getElementById('ncn').checked){
            //affichage des images toit et sols en lien avec le choix du type de chauffage
            $('#ceilingPicture').attr('src', '../images/forms/ceiling/ceilingCeiling.png');
            $('#floorPicture').attr('src', '../images/forms/floor/floorBasement1.png');
           
            if(document.getElementById('changedCeiling').checked == true && document.getElementById('changedCeiling').disable == true) {
                document.getElementById('yearChangedCeiling').value = "";
            }
            //activation des champs du toit selon si le toit et le plafond sont pareils ou différents
            document.getElementById("ceilingAreaId").value = document.getElementById("area").value / document.getElementById("floorsOccupied").value;
            document.getElementById('modifAreaCeiling').disabled = false;
            document.getElementById('changedCeilingDesc').style.color="black";
            document.getElementById('ceilingEqualsRoofDesc').hidden = true;
           
            document.getElementById('changedCeiling').disabled = false;
            if(document.getElementById('changedCeiling').checked == true) {
                document.getElementById('changedCeiling').checked = true;
                document.getElementById('yearChangedCeiling').value = "";
            }
            else {
                document.getElementById('changedCeiling').checked = false;
                document.getElementById('yearChangedCeiling').value = "";
            }
           
            //récupération de la superficie pour le sol
            if(document.getElementById('modifAreaFloor').checked == false)
                document.getElementById("floorAreaId").value = document.getElementById("area").value / document.getElementById("floorsOccupied").value;
        }        
       
        if(document.getElementById('nc').checked){
            //affichage des images toit et sols en lien avec le choix du type de chauffage
            $('#ceilingPicture').attr('src', '../images/forms/ceiling/ceilingCeiling.png');
            $('#floorPicture').attr('src', '../images/forms/floor/floorNoBasement.png');
           
            if(document.getElementById('changedCeiling').checked == true && document.getElementById('changedCeiling').disable == true) {
                document.getElementById('yearChangedCeiling').value = "";
            }
           
            //activation des champs du toit selon si le toit et le plafond sont pareils ou différents
            document.getElementById("ceilingAreaId").value = document.getElementById("area").value / document.getElementById("floorsOccupied").value;
            document.getElementById('modifAreaCeiling').disabled = false;
            document.getElementById('changedCeilingDesc').style.color="black";
            document.getElementById('ceilingEqualsRoofDesc').hidden = true;
           
            document.getElementById('changedCeiling').disabled = false;
            if(document.getElementById('changedCeiling').checked == true) {
                document.getElementById('changedCeiling').checked = true;
                document.getElementById('yearChangedCeiling').value = "";
            }
            else {
                document.getElementById('changedCeiling').checked = false;
                document.getElementById('yearChangedCeiling').value = "";
            }
           
            //récupération de la superficie pour le sol
            if(document.getElementById('modifAreaFloor').checked == false)
                document.getElementById("floorAreaId").value = document.getElementById("area").value / document.getElementById("floorsOccupied").value;
        }
       
        //lorsque l'on décoche le coche "rénové", l'année de rénovation est effacée
        if(document.getElementById('changedCeiling').checked == false) {
            document.getElementById('yearChangedCeiling').value = "";
        }
        if(document.getElementById('changedFloor').checked == false) {
            document.getElementById('yearChangedFloor').value = "";
        }
        if(document.getElementById('changedRoof').checked == false) {
            document.getElementById('yearChangedRoof').value = "";
        }
    }
</script>

<style type="text/css" media="screen">
    .layout-slider { margin-bottom: 60px; width: 50%;}
    .layout-slider-settings { font-size: 50px; padding-bottom: 10px; }
    .layout-slider .jslider-value {background-color: transparent ; }
    .layout-slider .jslider-value span{font-size: 24px; }
    .layout-slider .jslider-scale ins { font-size: 15px !important; }
</style>

<p id="subtitle"><?php echo TXT_HEATING; ?></p>
<div style="height: 420px; background-color: #f2f2f2; margin : 10px; padding : 20px; border-radius: 10px; Box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.4);">

<table id="generalitiesHeatingTab">
    <tr>
        <th class="paddingCell" style="text-align: left;  vertical-align: top;">
            <?php echo TXT_INSIDE_TEMP; ?>
            <img id="tooltip" src="../images/help.png" title="<?php echo TXT_HELP_INSIDE_TEMP; ?>" />    
        </th>
        <td class="layout-slider" colspan="4">
            <div style="height: 30px; width: 440px;">
                <input id="SliderSingle" name="temperatureIndoor"  type="slider" value="20" />
                <script type="text/javascript">
                    jQuery("#SliderSingle").slider({ from: 15, to: 30, scale: [15, '|', 20, '|', 25, '|', 30],limits: false, step: 0.5, dimension: '', skin: "blue",format: { format: '##.0', locale: 'de' },round: 1 });
                </script>
            </div>
        </td>
    </tr>
    <tr>
        <th  style="text-align: left;  vertical-align: top; ">
            <?php echo TXT_SITUATION_BUILDING; ?>                
        </th>
        <td>
            <div style="height: 30px; ">
                <select id="selectHeating" name="selectGeneralitiesHeating" onchange="eventHeating()">
                    <option selected value="Veuillez choisir une option">
                        <?php echo TXT_PLEASE_SELECT_AN_OPTION; ?>
                    </option>
                    <option value="Individuel"><?php echo TXT_INDIVIDUAL; ?></option>
                    <option value="Mitoyen"><?php echo TXT_ADJOINING; ?></option>
                    <option value="AuDessus"><?php echo TXT_ABOVE; ?></option>
                    <option value="AuDessous"><?php echo TXT_BELOW; ?></option>
                </select>
            </div>
        </td>
        <td id="selectHeating_errorMsg">
        </td>
        <td>
            <div id="orientationWallHeating" class="cacher" style="height: 30px;">
                <select id="selectAdjoiningOrientation" name="selectAdjoiningOrientation" onchange="generalities[14].processValidation();">
                    <option selected value="Veuillez choisir une option">
                        <?php echo TXT_PLEASE_SELECT_AN_OPTION; ?>
                    </option>
                    <option value="MurNord"><?php echo TXT_NORD_WALL; ?></option>
                    <option value="MurEst"><?php echo TXT_EAST_WALL; ?></option>
                    <option value="MurSud"><?php echo TXT_SOUTH_WALL; ?></option>
                    <option value="MurOuest"><?php echo TXT_WEST_WALL; ?></option>
                </select>
            </div>
        </td>
        <td id="selectAdjoiningOrientation_errorMsg">
        </td>
    </tr>
    <tr>
        <th  style="text-align: left;  vertical-align: top; ">
            <?php echo TXT_HEATED_ROOMS; ?>
            <img id="tooltip" src="../images/help.png" title="<?php echo TXT_HELP_SITUATION_BUILDING; ?>" />
        </th>
        <td colspan="4">
            <div style="width: 500px; height: 350px;">

                <div id="HeatCCC" style="float: left; width: 130px; text-align: center; padding-right: 20px;">
                    <img src="../images/forms/generalitiesHeating/ccc.png" style="width: 120px;"/>
                    <input onclick="displayCeilingFloor()" type="radio" name="heating" id="ccc" value="ccc" checked />
                </div>
                <div id="HeatCCN" style="float: left; width: 130px; text-align: center; padding-right: 20px;">
                    <img src="../images/forms/generalitiesHeating/ccn.png"  style="width: 120px;"/>
                    <input onclick="displayCeilingFloor()" type="radio"  name="heating" id="ccn" value="ccn"/>
                </div>
                <div id="HeatNCC" style="float: left; width: 130px; text-align: center; padding-right: 20px;">
                    <img src="../images/forms/generalitiesHeating/ncc.png"  style="width: 120px;"/>
                    <input onclick="displayCeilingFloor()" type="radio" name="heating" id="ncc" value="ncc"/>
                </div>              
                <div id="HeatNCN" style="float: left; width: 130px; text-align: center; padding-right: 20px;">
                    <img src="../images/forms/generalitiesHeating/ncn.png"  style="width: 120px;"/>
                    <input onclick="displayCeilingFloor()" type="radio" name="heating" id="ncn" value="ncn" />
                </div>
                <div id="HeatCC" style="float: left; width: 130px; text-align: center; padding-right: 20px;">
                    <img src="../images/forms/generalitiesHeating/cc.png"  style="width: 120px;"/>
                    <input onclick="displayCeilingFloor()" type="radio" name="heating" id="cc" value="cc"/>
                </div>
                <div id="HeatNC" style="float: left; width: 130px; text-align: center; padding-right: 20px;">
                    <img src="../images/forms/generalitiesHeating/nc.png"  style="width: 120px;"/>
                    <input onclick="displayCeilingFloor()" type="radio" name="heating" id="nc" value="nc"/>
                </div>
            </div>
        </td>
    </tr>
</table>
</div>